<template>
  <div class="container">
    <!-- 中间部分 -->
    <div class="center">
      <div class="center-left">
        <ul>
          <li>
            <el-button type="primary" plain class="submit" size="small" @click="handle"
              >提交</el-button
            >
          </li>

          <li>
            <el-button type="primary" plain class="bc" size="small" @click="save"
              >保存</el-button
            >
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部部分 -->
    <div class="bottom">
      <div class="bottom-left">
        <div class="maincontainer">
          <div class="content-bg">
            <div class="current-content from-Resetcsss">
              <div class="title-h">集体建设用地占用申请表</div>

              <div class="tab-list-cent">
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">项目名称</div>
                      <input
                        class="tab-list-text"
                        v-model="applyInfo.projectName"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">日期</div>
                      <div class="tab-list-text">
                        <el-date-picker
                          v-model="applyInfo.startTime"
                          type="date"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <!-- 若要居中,直接style="text-align:center" -->
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">经办人</div>
                      <input
                        class="tab-list-text"
                        type="text"
                        v-model="applyInfo.agent"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">联系方式</div>

                      <input
                        type="text"
                        class="tab-list-text"
                        v-model="applyInfo.contactInformation"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="0">
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">宗地位置</div>

                      <input
                        type="text"
                        class="tab-list-text"
                        v-model="applyInfo.position"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">具体位置</div>

                      <input
                        type="text"
                        class="tab-list-text"
                        v-model="applyInfo.specificLocation"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">宗地面积(平方米)</div>

                      <input
                        class="tab-list-text"
                        type="text"
                        v-model="applyInfo.landAreaRice"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">宗地面积(亩)</div>

                      <input
                        type="text"
                        class="tab-list-text"
                        v-model="applyInfo.landAreaMu"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">容积率</div>

                      <input
                        type="text"
                        class="tab-list-text"
                        v-model="applyInfo.plotRatio"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="tab-list">
                      <div class="tab-list-name">建筑密度(%)</div>

                      <input
                        class="tab-list-text"
                        type="text"
                        v-model="applyInfo.buildingDensity"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="24">
                    <div class="tab-list">
                      <div class="tab-list-name">绿化率(%)</div>
                      <input
                        class="tab-list-text"
                        type="text"
                        v-model="applyInfo.greeningRate"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="24">
                    <div class="tab-list">
                      <div class="tab-list-name">规划用途</div>
                      <input
                        class="tab-list-text"
                        type="text"
                        v-model="applyInfo.plannedUse"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="24">
                    <div class="tab-list">
                      <div class="tab-list-name zfsp">政府批转意见</div>
                      <textarea
                        class="tab-list-text"
                        name=""
                        id=""
                        cols="10"
                        rows="3"
                        v-model="applyInfo.governmentOpinion"
                      ></textarea>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-tab" type="flex" :gutter="50">
                  <el-col :span="24">
                    <div class="tab-list">
                      <div class="tab-list-name other">其他说明</div>
                      <textarea
                        class="tab-list-text"
                        name=""
                        id=""
                        cols="10"
                        rows="3"
                        v-model="applyInfo.otherInstructions"
                      ></textarea>
                    </div>
                  </el-col>
                </el-row>
                <el-row
                  class="row-tab"
                  type="flex"
                  style="border-bottom: 1px solid #dfe2eb"
                  :gutter="50"
                >
                  <el-col :span="24">
                    <div class="tab-list">
                      <div class="tab-list-name center">中心所(分局)意见</div>
                      <textarea
                        class="tab-list-text"
                        name=""
                        id=""
                        cols="20"
                        rows="3"
                        v-model="applyInfo.centralOpinion"
                      ></textarea>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import { saveInfo } from '@/api/zhbl/zhbl.js'
import{submit} from '@/api/zhbl/zhbl.js'

export default {

  data() {
    return {
      value1: "",
      showsendDialog:false,
      businessId:'',
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],

      applyInfo: {
        agent: "", //经办人
        buildingDensity: "", // 建筑密度
        centralOpinion: "",
        contactInformation: "",
        governmentOpinion: "",
        greeningRate: "",
        landAreaMu: "",
        landAreaRice: "",
        otherInstructions: "",
        plannedUse: "",
        plotRatio: "",
        position: "",
        projectName: "",
        specificLocation: "",
        startTime: "",
        businessId:""
      },
    };
  },
  created() {
    // console.log(this.$route.query.id)
    this.applyInfo.businessId=this.$route.query.id
    this.businessId=this.$route.query.id
    console.log(this.businessId)
  },
  methods:{
   async save() {
      const res = await saveInfo(JSON.stringify(this.applyInfo))
      console.log(res)
    },
    handle() {
        this.$confirm('是否确定提交?', '提示', {
          type: 'warning'
        }).then(async () => {
          await saveInfo(JSON.stringify(this.applyInfo));
          const res =await submit(
            JSON.stringify({
            businessId:this.businessId,
            // defId:'churang:1:2692707',
            // modelId:28
            defId:'sdcs:3:2725003',
            modelId:48
            })
             
          )
          console.log(res)
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功!'
          });          
        });
      
    }
  }
};
</script>

<style lang="scss" scoped>
input {
  border: none;
  outline: none;
  width: 100%;
}
textarea {
  border: none;
  outline: none;
}
.tab-list-cent .tab-list .tab-list-name /deep/ {
  line-height: 20px !important;
}
/deep/ .el-input__inner {
  height: 14px;
  border: none;
  margin-top: -10px;
}
/deep/.el-input__icon {
  line-height: 18px;
}
/deep/.el-date-editor.el-input {
  // height: 10px;
  border: none;
}
/deep/ .el-cascader {
  line-height: 18px;
}
.maincontainer {
  height: 100%;
}

.tab-list-cent {
  width: 100%;
  margin-top: 30px;
  .tab-list {
    display: flex;
    font-size: 12px;
    .tab-list-name {
      width: 180px;
      padding: 12px;
      background: #f8f8f8;
      line-height: 12px;
      color: #606266;
      text-align: right;
    }
    .tab-list-text {
      flex: 1;
      padding: 12px;
      line-height: 14px;
      color: #434654;
      text-align: left;
    }
  }
}

.row-tab {
  width: 100%;
  border: 1px solid #dfe2eb;
  margin: 0px !important;
  box-sizing: border-box;
  border-bottom: none;
}
.content-bg {
  background: #ffffff;
  // border: 1px solid red;
  width: 100%;
  padding: 0px 10%;
  box-sizing: border-box;
  height: 100%;
  .top {
    margin-top: 30px;
    .top-l {
      float: left;
      font-size: 14px;
      margin-left: 10px;
    }
    .top-r {
      float: right;
      font-size: 14px;
      margin-right: 20px;
    }
  }
}
.current-content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  .title-h {
    height: 44px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
  }
}
.from-Resetcsss {
  .el-input-group__append,
  .el-input-group__prepend {
    // width: 50px;
    text-align: center;
    padding: 0px;
  }
  .el-form-item__label {
    padding: 9px 15px;
    line-height: initial;
  }

  .el-col-12 {
    border-right: 1px solid #dfe2eb;
    padding: 0px !important;
  }
  .el-col-24 {
    padding: 0px !important;
  }
  .el-col-12:nth-child(2n + 0) {
    border-right: none;
  }
  .el-form-item__content {
    display: flex;
    line-height: initial;
  }
  .el-select {
    flex: 1;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
}
.container {
  width: 100%;
  height: 100%;
  //浏览器的样式
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgb(196, 191, 191);
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 0.5);
  }

  // /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    background-color: rgba(240, 240, 240, 0.5);
  }
  // border:1px solid red;
  // 中间部分
  .center {
    height: 60px;
    // border-bottom: 1px solid green;
    .center-left {
      float: left;
      ul li {
        float: left;
        font-size: 12px;
        .submit,
        .back,
        .up,
        .wb,
        .zb,
        .bc {
          border-radius: 3px;
          font-size: 12px;
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
          font-weight: 400;
          text-align: left;
          margin-top: 10px;
          margin-left: 8px;
        }
      }
    }

  }

  // 底部部分
  // 底部样式
  .bottom {
    margin-top: 10px;
    height: 100%;
    // display: flex;
    .bottom-left {
      // border:1px solid red;
      float: left;
      margin-left: 12px;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: scroll;
    }

  }
}
</style>